<template>
  <view class="time-selector">
    <view
      v-for="(period, index) in periods"
      :key="index"
      class="time-tab"
      :class="{ active: activeIndex === index }"
      @click="handleClick(index)"
    >
      {{ getLabel(period) }}
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

// Props 定义
const props = defineProps({
  // 时间周期数组
  periods: {
    type: Array,
    required: true
  },
  // 当前激活的索引
  activeIndex: {
    type: Number,
    default: 0
  },
  // 是否使用对象格式的 periods（如果为 true，则会尝试从每个对象中获取 label 属性）
  useObjectFormat: {
    type: Boolean,
    default: false
  }
});

// Emits 定义
const emit = defineEmits(['change']);

// 获取标签文本
const getLabel = (period) => {
  if (props.useObjectFormat && typeof period === 'object' && period !== null) {
    return period.label || '';
  }
  return period;
};

// 处理点击事件
const handleClick = (index) => {
  emit('change', index);
};
</script>

<style lang="scss" scoped>
.time-selector {
  display: flex;
  margin: 0 30rpx 30rpx;

  .time-tab {
    padding: 16rpx 32rpx;
    margin-right: 16rpx;
    font-size: 26rpx;
    color: #666;
    background: #f5f7fa;
    border-radius: 8rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s;

    &.active {
      background: #ffffff;
      border-color: #2196f3;
      color: #2196f3;
    }
  }
}
</style>